<template>
  <div class="echar">
    <div id="main" style="width: 600px; height: 400px"></div>
    <div id="box" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
import muted from "../../ultis/user";
import Echarts from "echarts";
import { createNamespacedHelpers } from "vuex";

const { mapState, mapActions } = createNamespacedHelpers("user");
const { mapActions: mapAction } = createNamespacedHelpers("car");
export default {
  data() {
    return {
      totalnum: "", //用户总数
      catnum: "", //汽车总数
      //柱状图
      options: {
        title: {
          text: "用户注册量",
        },
        tooltip: {},
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            name: "用户注册量",
            type: "bar",
            data: [],
            color: ["#7b90d2"],
          },
        ],
      },
      //饼状图
      option: {
        visualMap: {
          show: false,
          min: 0,
          max: 100,
          inRange: {
            colorLightness: [0, 1],
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            data: [],
          },
        ],
      },
    };
  },
  created() {
    this.changData();
    this.getAll();
    console.log("111",this.catnum)
  },
  computed: {
    ...mapState(["userData"]),
  },
  mounted() {
    this.getEcharts();
    this.getpie();
  },
  methods: {
    ...mapAction(["findAllCar"]),
    async getAll() {
      const { data } = await this.findAllCar();
      this.catnum = data.data.data.length;
      console.log(this.catnum);
    },

    changData() {
      const arr = this.userData.gotUsers;
      this.totalnum = arr.length;
      const data = muted(arr, -4);
      const data1 = muted(arr, -3);
      const data2 = muted(arr, -2);
      const data3 = muted(arr, -1);
      const data4 = muted(arr, 0);
      const data5 = muted(arr, 1);
      this.options.xAxis.data.push(
        data.time,
        data1.time,
        data2.time,
        data3.time,
        data4.time,
        data5.time
      );
      this.options.series[0].data.push(
        data.daily.length,
        data1.daily.length,
        data2.daily.length,
        data3.daily.length,
        data4.daily.length,
        data5.daily.length
      );
      this.option.series[0].data.push(
        { value: 22, name: "车辆总数" },
        { value: Number(this.totalnum), name: "用户注册量" },
        { value: 23, name: "车主数量" }
      );
    },
    getEcharts() {
      const myChart = Echarts.init(document.getElementById("main"));
      myChart.setOption(this.options);
    },
    getpie() {
      const myChart = Echarts.init(document.getElementById("box"));
      myChart.setOption(this.option);
    },
  },
};
</script>

<style>
.echar {
  width: 100%;
  height: 100%;
  display: flex;
}
</style>